<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input
          v-model="courseInfo.title"
          placeholder="列子:JAVA 课程大全，从小白到入门"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程课时">
        <el-input-number
          v-model="courseInfo.lessonNum"
          :min="0"
          controls-position="right"
          placeholder="请选择课程课时"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :value="teacher.id"
            :label="teacher.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程类别">
        <el-select v-model="courseInfo.subjectParentId" @change="changeOne">
          <el-option
            v-for="subjectOne in subjectOneList"
            :key="subjectOne.id"
            :value="subjectOne.id"
            :label="subjectOne.title"
          ></el-option>
        </el-select>
        <el-select v-model="courseInfo.subjectId">
          <el-option
            v-for="subjectTwo in subjectTwoList"
            :key="subjectTwo.id"
            :value="subjectTwo.id"
            :label="subjectTwo.title"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程封面">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8221/admin/oss/file/upload?module=cover"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="courseInfo.cover" :src="courseInfo.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程简介">
        <div id="richText">
          
        </div>
      </el-form-item>
      <el-form-item label="课程价格">
        <el-input-number
          v-model="courseInfo.price"
          :min="0"
          controls-position="right"
          placeholder="课程价格"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button :disabled="savebtn" type="primary" @click="saveNext"
        >保存并下一步</el-button
      >
    </div>
  </div>
</template>
<script>
//import Tinymce from "@/components/Tinymce"
import courseApi from "@/api/course";
import teacherApi from "@/api/teacher";
import SubjectAPi from "@/api/subject";
import E from "wangeditor";
export default {
  // components:{Tinymce},
  data() {
    return {
      editor: null,
      savebtn: false,
      courseInfo: {
        price: 0,
        lessonNum: 0,
        teacherId: "",
        subjectId: "",
        subjectParentId: "",
        cover: "",
        description: "",
      },
      courseDescription:'',
      teacherList: {},
      subjectOneList: {},
      subjectTwoList: {},
    };
  },
  
  mounted() {
    if(this.$route.name==='CourseInfoEdit'){
    this.initRichText();
    }
    else{
      this.initRichTowText();
    }
  },
  created() {
    this.initTeacher();
    //如果来自路由编辑
    if(this.$route.name==='CourseInfoEdit'){
      this.$parent.courseId=this.$route.params.id;   
      //this.getCourseDescription();
    }
    //数据回写
    if (this.$parent.courseId) {
      this.getCourseInfo(this.$parent.courseId);
    } else {
      this.initSubject();
    }
  },
  methods: {
    initRichText() {
      //this.getCourseDescription();
       courseApi.getCoursDescription(this.$route.params.id).then(res=>{
         this.courseDescription=res.data.item;
         this.editor = new E("#richText");
         this.editor.create();
         this.editor.txt.html(this.courseDescription);//设置方式
       //this.editor.txt.html('<p>用 JS 设置的内容</p>')
       //初始化富文本内容
       })
    },
     initRichTowText() {
      //this.getCourseDescription();
       
         this.editor = new E("#richText");
         this.editor.create();
         
    },
    
    getCourseDescription(){
       courseApi.getCoursDescription(this.$route.params.id).then(res=>{
         this.courseDescription=res.data.item;
         console.log(res.data.item);
         console.log(this.courseDescription)
       })
    },
    getCourseInfo(id) {
      courseApi.findCourseBy(id).then((res) => {
        this.courseInfo = res.data.items;
        //渲染select
        SubjectAPi.subjectList().then((res) => {
          this.subjectOneList = res.data.item;
          //渲染二级
          this.subjectOneList.forEach((element) => {
            this.subjectTwoList = element.children;
          });
        });
      });
    },
    beforeAvatarUpload(file) {
      const fileType = file.type;
      const fileSize = file.size;
      if (!fileType === "img/png") {
        this.$message.error("文件类型非法");
      }
      if (fileSize / 1024 / 1024 > 2) {
        ths.$message.error("上传文件过大");
      }
    },
    handleAvatarSuccess(response) {
      this.courseInfo.cover = response.data.url;
      //强制刷新
      this.$forceUpdate();
    }, //上传失败
    handleAvatarError() {
      this.$message.error("上传失败，网络不稳定");
    },
    saveNext() {
      this.savebtn = true;
      //获取富文本值
      this.courseInfo.description = this.editor.txt.html();
      if (!this.$parent.courseId) {
        this.saveCourseInfo();
        this.$parent.courseId = this.courseInfo.courseId;
        //console.log(this.$parent.courseId)
        //this.$parent.active = 1; //父调子
      } else {
        this.updateCourseInfo();
        this.$parent.courseId = this.courseInfo.courseId;
        //console.log(this.$parent.courseId)
        //this.$parent.active = 1; //父调子
      }
    },
    changeOne(value) {
      this.subjectOneList.forEach((element) => {
        this.subjectTwoList = element.children;
      });
    },
    saveCourseInfo() {
      courseApi.saveCouser(this.courseInfo).then((res) => {
        this.$parent.courseId = res.data.courseID;
        this.$parent.active = 1; //父调子
        this.$message.success(res.message)
        
      });
    },
    updateCourseInfo() {
      courseApi.updateCouser(this.courseInfo).then((res) => {
        this.$parent.courseId = res.data.courseID;
        this.$parent.active = 1; //父调子
        this.$message.success(res.message)
      });
    },
    initTeacher() {
      teacherApi.list().then((res) => {
        this.teacherList = res.data.items;
      });
    },
    initSubject() {
      SubjectAPi.subjectList().then((res) => {
        this.subjectOneList = res.data.item;
      });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 357px;
  line-height: 357px;
  text-align: center;
}
.avatar {
  width: 640px;
  height: 357px;
  display: block;
}
</style>
